<template>
  <div class="content-container" ref="wrapper">
    <div class="list-content">
      <div class="top-tip" ref="top-tip">
        <span>{{topTipMsg}}</span>
      </div>
      <content-card :productList="list"></content-card>
      <div class="loading-container" v-show="!list.length && loadding">
        <loading></loading>
      </div>
      <no-data v-show="!list.length && !loadding"></no-data>
      <div class="bottom-tip" ref="bottom-tip" v-show="list.length" @click="concatList">
        <span class="loading-hook">{{bottomTipMsg}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import NoData from '@/components/noData.vue'
import DataLoading from '@/components/loading/loading'
import ContentCard from '@/components/ContentCard.vue'
import Loading from '@/components/loading/loading'
import { httpReq } from '@/common/api'
export default {
  name: 'HomeContent',
  data () {
    return {
      topTipMsg: '下拉刷新',
      bottomTipMsg: '查看更多',
      currentPage: 1,
      list: [],
      loadData: false,
      loadding: false,
      pageSize:10,
      sortfield:'com',
      conditions:null
    }
  },
  components: {
    DataLoading,
    ContentCard,
    Loading,
    NoData
  },
  methods: {
    getList (conditions) {
      this.conditions = conditions
      this.list= []
      this.loadding=true
      this.scroll.scrollTo(0, 0, 0)
      this.bottomTipMsg = '查看更多'
      this.currentPage = 1
      const commonParams = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        sortfield: this.sortfield
      }
      const params = Object.assign(commonParams,conditions);
      this.sortfield = params.sortfield;
      httpReq('GET','/list/as/app/financial/normal/loanSupermarketProduct/list',params).then((res)=>{
        this.list = res.rows;
        this.loadding=false
      }).catch((err)=>{
        this.$toast(err)
        this.loadding=false
      })
    },
    concatList () {
      if(this.bottomTipMsg == '没有更多了') return
      if (!this.loadData) {
        this.loadData = true
        this.bottomTipMsg = '加载中...';
        const commonParams = {
          pageNum: ++this.currentPage,
          pageSize: this.pageSize,
          sortfield: this.sortfield,
        }
        const params = Object.assign(commonParams,this.conditions);
        httpReq('GET','/list/as/app/financial/normal/loanSupermarketProduct/list',params).then((res)=>{
            if(res.rows.length){
              this.list = this.list.concat(res.rows);
              setTimeout(()=> {
                this.scroll.refresh()
                this.bottomTipMsg = '查看更多'
                this.loadData = false
              }, 500)
            }else {
              this.bottomTipMsg = '没有更多了'
              this.loadData = false
            }
        }).catch((err)=>{
          this.$toast(err);
          this.loadData = false;
          this.bottomTipMsg = '查看更多'
        })
      }
    }
  },
  mounted () {
    const _this = this
    _this.scroll = new BScroll(_this.$refs.wrapper, {
      probeType: 1,
      mouseWheel: true,
      click: true,
      tap: true
    })
    const conditions = {
      sortfield:'com'
    }
    _this.getList(conditions)
    // 滑动中
    this.scroll.on('scroll', function (position) {
      if (position.y > 30) {
        _this.topTipMsg = '释放立即刷新'
      }
    })
    this.scroll.on('touchEnd', function (position) {
      if (position.y > 30) {
        _this.topTipMsg = '下拉刷新'
        const commonParams = {
          pageNum: 1,
          pageSize: _this.pageSize,
          sortfield: _this.sortfield
        }
        const params = Object.assign(commonParams,_this.conditions);
        httpReq('GET','/list/as/app/financial/normal/loanSupermarketProduct/list',params).then((res)=>{
          _this.list = res.rows;
          setTimeout(() => {
            _this.$toast('刷新成功')
            _this.scroll.refresh()
            _this.currentPage = 1
          }, 500)
        }).catch((err)=>{
          _this.$toast(err)
        })
      } else if (position.y < (this.maxScrollY - 30)) {
        _this.concatList()
      }
    })
  },
  filters: {
    formatTimeUnit (value) {
      if (!value) return
      switch (value) {
        case 'year':
          return '年'
        case 'month':
          return '个月'
        case 'day':
          return '天'
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  /* 下拉、上拉提示信息 */
  .top-tip
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #555;
  .bottom-tip
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #777;
    background: #f2f2f2;
  .content-container
    background: $bgColor
    box-sizing: border-box
    position: absolute
    top: .9rem
    left: 0
    bottom: 0
    right: 0
    overflow: hidden
    .list-content
      min-height 100%
      position relative
      padding :.24rem
      .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
</style>
